<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动渐变背景</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            min-height: 100vh;
            transition: background 1.5s ease-in-out; /* 平滑过渡效果 */
        }
    </style>
</head>
<body>
    <script>
        // 定义一组浅色渐变（每种渐变包含两种相近的浅色调）
        const gradients = [
            { from: "#e0f7fa", to: "#b2ebf2" }, // 浅蓝渐变
            { from: "#fce4ec", to: "#f8bbd0" }, // 浅粉渐变
            { from: "#e8f5e9", to: "#c8e6c9" }, // 浅绿渐变
            { from: "#f3e5f5", to: "#e1bee7" }, // 浅紫渐变
            { from: "#fff8e1", to: "#ffe082" }, // 浅黄渐变
            { from: "#fff3e0", to: "#ffcc80" }, // 浅橙渐变
            { from: "#f5f5f5", to: "#eeeeee" }, // 浅灰渐变
            { from: "#e0f2f1", to: "#b2dfdb" }  // 浅青渐变
        ];
        
        // 渐变方向：上下 (to bottom) 或 左上到右下 (to bottom right)
        const directions = ["to bottom", "to bottom right"];
        
        let currentIndex = 0;
        
        // 获取body元素
        const body = document.body;
        
        // 切换到下一个渐变
        function changeGradient() {
            // 计算下一个渐变的索引
            currentIndex = (currentIndex + 1) % gradients.length;
            const nextGradient = gradients[currentIndex];
            
            // 随机选择一个渐变方向
            const currentDirection = directions[Math.floor(Math.random() * directions.length)];
            
            // 应用新的渐变背景
            body.style.background = `linear-gradient(${currentDirection}, ${nextGradient.from}, ${nextGradient.to})`;
            
            // 10秒后再次切换
            setTimeout(changeGradient, 10000);
        }
        
        // 初始化
        window.onload = () => {
            // 设置初始渐变
            const initialGradient = gradients[currentIndex];
            const initialDirection = directions[Math.floor(Math.random() * directions.length)];
            body.style.background = `linear-gradient(${initialDirection}, ${initialGradient.from}, ${initialGradient.to})`;
            
            // 启动第一个定时器，10秒后切换
            setTimeout(changeGradient, 10000);
        };
    </script>
</body>
</html>
